<template>
  <div class="cell">
    <div class="label" :style="`width:${width}`" v-if="label">{{ label }}</div>
    <div class="value">
      <template>{{ value }}</template>
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "my-cell",
  props: {
    label: {
      type: String,
      default: ""
    },
    value: {
      type: [String, Number],
      default: ""
    },
    width: {
      type: String,
      default: "auto"
    }
  }
};
</script>
<style lang="scss" scoped>
.cell {
  display: flex;
  padding: 5px 0;
  .label {
    @include shrink;
    margin-right: 5px;
  }
  .value {
    color: #999;
    @include grow;
  }
}
</style>
